@mixin clearfix {
    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

@mixin absCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// MEDIA QUERY MANAGER
/*
* 0 - 600px:  Phone
* 600 - 900px:  Tablet portrait
* 600 - 900px:  Tablet landscape
* 900 - 1200px:  is where our normal styles apply
* 1800pxL:   Big

* $breakpoint 断点的选择参数
* - phone
* - tab-port
* - tab-land
* - big-desktop
*/
@mixin respond($breakpoint) {

    @if $breakpoint==phone {
        @media (max-width: 37.5em) {
            // 600px
            @content;
        }
    }

    @else if $breakpoint==tab-port {
        @media (max-width: 56.25em) {
            // 900px
            @content;
        }
    }

    @else if $breakpoint==tab-land {
        @media (max-width: 75em) {
            // 1200px
            @content;
        }
    }

    @else if $breakpoint==big-desktop {
        @media (min-width: 112.5em) {
            // 1800px
            @content;
        }
    }
}